<template>
<!-- 待审核页面 -->
  <div class="order">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>待审核产品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-tabs type="border-card" v-model="activename" @tab-click="handleClick">
        <el-tab-pane label="全部" name="1">
          <div class="conter">
            <el-table :data="tableData" border stripe>
              <el-table-column
                type="index"
                :index="indexNum"
                label="序号"
                width="40"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="booknumber"
                label="图书编号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="bookname"
                label="图书名称"
                width=""
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scpoe">
                  <span>{{ scpoe.row.bookname }}</span>
                </template>
              </el-table-column>
               <el-table-column
                prop="booktype_id"
                label="图书类型"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="author"
                label="图书作者"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="press"
                label="出版社"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="image"
                label="封面图"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  <img
                    :src="api + scope.row.image"
                    min-width="80"
                    height="80"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="content"
                label="简介"
                width=""
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                label="原价"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="vipprice"
                label="现价"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="freight"
                label="运费"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="number"
                label="数量"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="oldnewdegree"
                label="新旧度"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="throughauditbooks(scope.row.id)"
                    >通过</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="notthroughauditbooks(scope.row.id)"
                    >未通过</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="2">
          <div class="conter">
            <el-table :data="tableDatanot" border stripe>
              <el-table-column
                type="index"
                :index="indexNum"
                label="序号"
                width="40"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="booknumber"
                label="图书编号"
                width="60"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="bookname"
                label="图书名称"
                width=""
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scpoe">
                  <span>{{ scpoe.row.bookname }}</span>
                </template>
              </el-table-column>
               <el-table-column
                prop="booktype_id"
                label="图书类型"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="author"
                label="图书作者"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="press"
                label="出版社"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="image"
                label="封面图"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  <img
                    :src="api + scope.row.image"
                    min-width="80"
                    height="80"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="content"
                label="简介"
                width=""
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                label="原价"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="vipprice"
                label="现价"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="freight"
                label="运费"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="number"
                label="数量"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="oldnewdegree"
                label="新旧度"
                width=""
                align="center"
              >
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deletenotthroughauditbooks(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDatanot: [],
      activename: "1",
      api: this.imageapi
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handleClick(data) {
      let name = data.name
      if (name == 1) {
        this.init();
      } else if (name == 2) {
        this.initnot();
      }
    },
    //请求后端待审核数据
    init() {
      const that = this;
      that.$http
        .get("/selectauditbooks")
        .then(res => {
          // console.log(res);
          that.tableData = res.data;
        })
        .catch(function() {
          alert("请求数据失败...");
        });
    },
    initnot() {
      const that = this;
      that.$http
        .get("/selectnotauditbooks")
        .then(res => {
          // console.log(res);
          that.tableDatanot = res.data;
        })
        .catch(function() {
          alert("请求数据失败...");
        });
    },
    //element table自带序号
    indexNum(index) {
      return index + 1;
    },
    //throughauditbooks 审核通过
    throughauditbooks(id) {
      const that = this;
      that.$http
        .post("/throughauditbooks", { id })
        .then(() => {
          // console.log(res);
          that.init();
        })
        .catch(function() {});
    },
    //审核未通过
    notthroughauditbooks(id) {
      const that = this;
      that.$http
        .post("/notthroughauditbooks", { id })
        .then(() => {
          // console.log(res);
          that.init();
        })
        .catch(function() {});
    },
    //删除审核未通过的图书
    deletenotthroughauditbooks(id) {
      const that = this;
      that
        .$confirm("此操作将数据删除不可恢复, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          that.$http.post("/deletenotthroughauditbooks", { id }),
            that.$message({
              type: "success",
              message: "删除成功!"
            });
           for (let i in that.tableDatanot) {
            if (that.tableDatanot[i].id == id) {
              that.tableDatanot.splice(i, 1); //删除不请求数据，直接在数组中删除
              break;
            }
          }
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style scoped>
</style>